<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .title{
            line-height: 40px;
            font-weight: bold;
            text-align: center;
        }
        .list .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }
        .list  .item img{
            width: 60px;
        }
        .name{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="title">任务列表</div>
        <div class="list">
            <!-- <div class="item" v-for="(item,index) in tasklist"v-bind:key="index"> -->
            <div class="item" v-for="(item,index) in tasklist":key="index">
                <div class="left">
                    <!-- <img v-bind:src="item.pic " alt="" srcset=""> -->
                    <img :src="item.pic " alt="" srcset="">
                </div>
                <div class="middle">
                    <div class="name">{{item.name}}</div>
                    <div class="desc">{{item.desc}}</div>
                </div>
                <div class="right">
                    <!-- <button v-on:click="changeStatus(item)">{{item.status==1?'去完成':item.status==2?'领取':'已领取' }}</button> -->
                    <button @click="changeStatus(item)">{{item.status==1?'去完成':item.status==2?'领取':'已领取' }}</button>
                </div>
            </div>
        </div>  
    </div>
    <script src="./vue-2.5.21.js"></script>
    <!-- v-on:时间类型=函数名（参数）-->
    <!-- v-on: 时间类型=函数名k可以简写为@事件类型=函数名-->
    <!-- v-bind：属性名=属性值可以简写为：属性名=属性值 -->
    <script>
        var v=new Vue({
            el:'#app',
            data:{
                tasklist:[
                    {id:1, pic:'./02.webp', name:'咪咕视频送流量',desc:'每月领500浏览',status:1},
                    {id:2,pic:'./02.webp', name:'咪咕视频送福利',desc:'每月领800浏览',status:2},
                    {id:3,pic:'./02.webp',name:'咪咕视频送套餐折扣券',desc:'每月领1500浏览',status:3},
                    {id:4,pic:'./02.webp',name:'咪咕视频送超级秒杀',desc:'每月领5500浏览',status:1},
                ]
            },
            methods:{
                //定义方法
                changeStatus(item){
                    // console.log('更改任务状态');
                    if(item.status==1){
                        item.status=2
                    }else if(item.status==2){
                        item.status=3
                    }
                }
            }
            
        })


    </script>
</body>
</html>